<!--
 * @FileDescription: 附件上传进度 提示弹窗
 * @Author: 祝小文
 * @Date: 2022-10-29 10:25
-->
<script setup lang="ts">
const chemicalStore = useChemicalStore()

const props = defineProps({
  progressPercent: {
    type: Number,
    default: 0,
  },
})
</script>

<template>
  <el-dialog
    v-model="chemicalStore.fileUploadTipShow"
    title="提示"
    width="450px"
    custom-class="fileuploadtip-confirm-dialog"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="fileuploadtip-confirm-dialog-content">
      <span v-if="progressPercent !== 100">附件正在上传...</span>
      <span v-else>请稍等...</span>
      <el-progress
        style="margin-top: 10px"
        :stroke-width="16"
        :percentage="progressPercent"
      ></el-progress>
    </div>
  </el-dialog>
</template>

<style lang="less">
.fileuploadtip-confirm-dialog {
  top: 20vh !important;
  border: 1px solid #999;
  background: rgba(51, 51, 51, 0.9);
  .el-dialog__title {
    font-size: 20px;
    font-weight: 700;
    color: #fffefe;
  }
  .fileuploadtip-confirm-dialog-content {
    font-size: 14px;
    font-weight: 700;
    color: #fffefe;
  }

  .el-dialog__body {
    padding: 20px 30px 50px;
  }

  .el-progress__text {
    color: #02979b;
  }

  .el-progress-bar__inner {
    background-color: #02979b;
  }
}
</style>
